import { HStack, Box, Image, Text, Input, Button } from '@chakra-ui/react'
import styles from './shortcut.module.css'
import { css } from '@emotion/react'
import React, { useState } from 'react'

const HStackStyle = {
  margin: '0 auto',
  marginTop: '20px'
}

const TextStyle = {
  width: '100%',
  overflow: 'hidden',
  textAlign: 'center',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  fontSize: '12px',
  padding: '0 10px'
}

const imgbg = css`
  width: 48px;
  height: 48px;
  display: inline-block;
  background-color: rgba(241, 243, 244, 1);
  text-align: center;
  line-height: 43px;
  border-radius: 50%;
  margin-top: 20px;
  & img {
    display: inline-block;
  }
`

const btnStyle = {
  width: '60px',
  height: '30px',
  fontWeight: 'normal',
  padding: '8px 16px',
  borderRadius: '4px',
  color: 'rgb(128,134,139)'
}

const btnStyleLeft = {
  color: 'rgb(26,11,232)',
  backgroundColor: 'white',
  border: '1px solid rgb(128,134,139)'
}

export default function shortcut () {
  // let isOpen = false
  const [user, setUser] = React.useState({ isOpen: false })

  const closeFunc = () => {
    // isOpen = false
    console.log('关闭弹窗')
    setUser({
      ...user,
      isOpen: false
    })
  }
  const openFunc = () => {
    // isOpen = true
    console.log('打开弹窗')
    setUser({
      ...user,
      isOpen: true
    })
  }

  return (
    <Box>
      {user.isOpen ? (
        <Box className={styles.dailog}>
          <div className={styles.formBox}>
            <Text>添加快捷方式</Text>
            <Box mt='20px' fontSize='12px' className={styles.formInfo}>
              <Text mb='8px'>名称</Text>
              <Input />
              <Text mb='8px' mt='20px'>
                网址
              </Text>
              <Input />
            </Box>
            <Box mt='40px' className={styles.btnBox}>
              <Button
                {...btnStyle}
                {...btnStyleLeft}
                size='xs'
                mr='10px'
                onClick={closeFunc}
              >
                取消
              </Button>
              <Button {...btnStyle} size='xs' onClick={closeFunc}>
                完成
              </Button>
            </Box>
          </div>
        </Box>
      ) : (
        ''
      )}
      <HStack w='561px' {...HStackStyle}>
        <a href='#' className={styles.ItemstyleHover}>
          <Image
            className={styles.ItemMore}
            src='/images/icon_more.svg'
            title='更多操作'
          />
          <div css={imgbg}>
            <Image src='/images/Git.png' />
          </div>
          <Text mt='6px' {...TextStyle}>
            GitHub
          </Text>
        </a>
        <a href='#' className={styles.ItemstyleHover}>
          <Image
            className={styles.ItemMore}
            src='/images/icon_more.svg'
            title='更多操作'
          />
          <div css={imgbg}>
            <Image src='/images/baidu.png' />
          </div>
          <Text mt='6px' {...TextStyle}>
            百度一下，你就知道
          </Text>
        </a>
        <a href='#' className={styles.ItemstyleHover} onClick={openFunc}>
          <div css={imgbg}>
            <Image src='/images/add.svg' />
          </div>
          <Text mt='6px' {...TextStyle}>
            添加快捷方式
          </Text>
        </a>
      </HStack>
    </Box>
  )
}
